<!-- 块设备的概况 -->
<template>
  <div>
    <a-row :gutter="16" style="margin-top: 15px; height:380px">
      <a-col :span="18" style="height:100%">
        <!-- 存储池数据统计（块设备相关） -->
        <div class="base-card-box" style="height:100%">
          <div class="base-card-title">
            {{$t('Store-pool-statics')}}<span>{{$t('Block-related')}}</span>
          </div>
          <div class="base-card-table-box total-table-box">
            <a-table 
              :columns="poolColumns"
              :loading="poolTableLoading" 
              :dataSource="poolData"
              size="small"
              :pagination="false"
              rowKey='pool_name'
              :scroll="poolData.length > 6 ? { y: 225,x:'none' } : {}"
              :locale="defaultSetting"
              :rowClassName="(record, i) => i%2 === 1 ? 'table-even-row' : 'table-odd-row'"
              bordered
            >
              <template slot='sizeTitle'>
                <span :title="$t('Preparation-size')">{{$t('Preparation-size')}}</span>
              </template>
            </a-table>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <!-- iSCSI 数据统计 -->
        <div class="base-card-box">
          <div class="base-card-title">{{$t('Iscsi-data-statics')}}</div>
          <a-spin :spinning="iscsiLoading">
          <div class="iscsi-box">
            <div class="iscsi-item-box" v-for="(item,index) in iscsiData" :key="index">
              <div class="iscsi-item-title">
                {{$store.state.language=='zh'? item.ch_label : item.en_label}}
              </div>
              <div class="item-value">{{item.value}}</div>
            </div>
          </div>
          </a-spin>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="16" style="margin-top:16px;height: 344px;">
      <a-col :span="14" style="height:100%">
        <!-- 块设备性能表 -->
        <div class="base-card-box" style="height:100%">
          <div class="base-card-title">
            {{$t('Block-performance-table')}}
          </div>
          <div class="base-card-table-box">
            <a-table 
              :columns="blockColumns"
              :loading="blockTableLoading" 
              :dataSource="blockData"
              size="small"
              :pagination="false"
              rowKey='name' :locale="defaultSetting"
              :scroll="blockData.length > 5 ? { y: 190 } : {}"
              :rowClassName="(record, i) => i%2 === 1 ? 'table-even-row' : 'table-odd-row' "
              bordered
            >
              <template slot='poolTitle'>
                <!-- 存储池/块设备 -->
                <span :title="$t('Pool')+'/'+$t('Block')">{{$t('Pool')}}/{{$t('Block')}}</span>
              </template>
            </a-table>
          </div>
        </div>
      </a-col>
      <a-col :span="10" style="height:100%">
        <!-- 相关服务进程状态 -->
        <div class="base-card-box" style="height:100%">
          <div class="base-card-title">
            {{$t('Process-status')}}
          </div>
          <div class="base-card-table-box">
            <a-table 
              :columns="serviceColumns"
              :loading="serviceTableLoading" 
              :dataSource="serviceData"
              size="small"
              :pagination="false"
              :rowKey='record => record.hostname + record.name' 
              :locale="defaultSetting"
              :scroll="serviceData.length > 5 ? { y: 190 } : {}"
              :rowClassName="(record, i) => i%2 === 1 ? 'table-even-row' : 'table-odd-row' "
              bordered
            >
              <template slot="status" slot-scope="text, record">
                <!-- 存活 -->
                <div v-if="text === 1">
                  <span class="green-circle"></span>{{$t('Survive')}}
                </div>
                <!-- 异常 -->
                <div v-else>
                  <span class="red-circle"></span>{{$t('Abnormal')}}
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'

export default {
  name: "BlockOverview",
  components: { EmptyData },
  data() {
    return {
      poolTableLoading: false,
      iscsiLoading: false,
      blockTableLoading: false,
      serviceTableLoading: false,
      poolColumns: [
        // 存储池名称
        {title: this.$t('Store-pool-name'), dataIndex:'pool_name', key:'pool_name', width: 130, ellipsis: true},
        // 块设备数量
        {title: this.$t('Block-device-num'), dataIndex:'block_count', key:'block_count', width: 120, ellipsis: true},
        // 快照数量
        {title: this.$t('SnapShot-num'), dataIndex:'block_snap_count', key:'block_snap_count', width: 120, ellipsis: true},
        // title:'精简制备大小(预分配空间)',
        {dataIndex:'num_bytes', key:'num_bytes', width: 150, ellipsis: true, slots: { title: 'sizeTitle' },},
        // 已使用空间
        {title: this.$t('Used-space'), dataIndex:'size', key:'size', width: 120, ellipsis: true},
        // 使用率
        {title: this.$t('Usage-rate'), dataIndex:'used_rate', key:'used_rate', width: 100, ellipsis: true,},
      ],
      poolData: [
        // {pool_name:this.$t('Total2'),block_num:'a',snap_num:1,size:1,space:1,usage:1},
      ],
      iscsiData: [
        {ch_label:'导出客户端数量：', en_label:'Number of exported clients:', value: 0},
        {ch_label:'关联的块设备数量(lun)：', en_label:'Number of associated block devices (lun):', value: 0},
        {ch_label:'正在连接数量：', en_label:'Number of connections in progress:', value: 0},
        {ch_label:'存储目标数量(target)：', en_label:'Number of storage targets:', value: 0},
      ],
      blockColumns: [
        // title:'存储池/块设备',
        {dataIndex:'name', key:'name', width: 120, ellipsis: true, slots: { title: 'poolTitle' },},
        // 写ops
        {title: this.$t('Write-ops'), dataIndex:'w_ops', key:'w_ops',ellipsis: true},
        // 读ops
        {title: this.$t('Read-ops'), dataIndex:'r_ops', key:'r_ops',ellipsis: true},
        // 写字节数
        {title: this.$t('Wr-bytes'), dataIndex:'w_byte', key:'w_byte', ellipsis: true},
        // 读字节数
        {title: this.$t('Rd-bytes'), dataIndex:'r_byte', key:'r_byte', ellipsis: true},
        // 写延迟
        {title: this.$t('Write-delay'), dataIndex:'w_delay', key:'w_delay', ellipsis: true},
        // 读延迟
        {title: this.$t('Read-delay'), dataIndex:'r_delay', key:'r_delay', ellipsis: true},
      ],
      blockData: [],
      serviceColumns: [
        // 服务名称
        {title: this.$t('Service-name'), dataIndex:'name', key:'name',ellipsis: true},
        // 主机名
        {title: this.$t('Hostname'), dataIndex:'hostname', key:'hostname',ellipsis: true},
        // 状态
        {title: this.$t('Status'), dataIndex:'status', key:'status',ellipsis: true, scopedSlots:{customRender:'status'}},
      ],
      serviceData: [],
      defaultSetting: {emptyText:<EmptyData />},
    }
  },

  mounted() {
    this.getInfo();
  },

  watch: {
    "$store.state.language"() {
      this.poolColumns = [
        {title: this.$t('Store-pool-name'), dataIndex:'pool_name', key:'pool_name', width: 130, ellipsis: true},
        {title: this.$t('Block-device-num'), dataIndex:'block_count', key:'block_count', width: 120, ellipsis: true},
        {title: this.$t('SnapShot-num'), dataIndex:'block_snap_count', key:'block_snap_count', width: 120, ellipsis: true},
        {dataIndex:'num_bytes', key:'num_bytes', width: 150, ellipsis: true, slots: { title: 'sizeTitle' },},
        {title: this.$t('Used-space'), dataIndex:'size', key:'size', width: 120, ellipsis: true},
        {title: this.$t('Usage-rate'), dataIndex:'used_rate', key:'used_rate', width: 100, ellipsis: true,},
      ];
      this.blockColumns = [
        {dataIndex:'name', key:'name',  width: 120, ellipsis: true, slots: { title: 'poolTitle' },},
        {title: this.$t('Write-ops'), dataIndex:'w_ops', key:'w_ops',ellipsis: true},
        {title: this.$t('Read-ops'), dataIndex:'r_ops', key:'r_ops',ellipsis: true},
        {title: this.$t('Wr-bytes'), dataIndex:'w_byte', key:'w_byte', ellipsis: true},
        {title: this.$t('Rd-bytes'), dataIndex:'r_byte', key:'r_byte', ellipsis: true},
        {title: this.$t('Write-delay'), dataIndex:'w_delay', key:'w_delay', ellipsis: true},
        {title: this.$t('Read-delay'), dataIndex:'r_delay', key:'r_delay', ellipsis: true},
      ];
      this.serviceColumns = [
        {title: this.$t('Service-name'), dataIndex:'name', key:'name',ellipsis: true},
        {title: this.$t('Hostname'), dataIndex:'hostname', key:'hostname',ellipsis: true},
        {title: this.$t('Status'), dataIndex:'status', key:'status',ellipsis: true, scopedSlots:{customRender:'status'}},
      ];
      if(this.poolData[this.poolData.length-1].pool_name == '总' || this.poolData[this.poolData.length-1].pool_name == 'Total') {
        this.poolData[this.poolData.length-1].pool_name = this.$t('Total2');
      }
    },
  },

  methods: {
    async getInfo() {
      this.poolTableLoading = true;
      this.iscsiLoading = true;
      this.blockTableLoading = true;
      this.serviceTableLoading = true;
      const res = await this.$api.blockOverview.getBlockInfoRequest();
      console.log('概览信息', res)
      if(res && res.data) {
        // 处理池的合计行
        let poolData = [...res.data.pool];
        if(!poolData[poolData.length-1].pool_name) {
          poolData[poolData.length-1].pool_name = this.$t('Total2');
        }
        this.poolData = [...poolData];

        // 处理iSCSI 数据统计
        this.iscsiData[0].value = res.data.iscsi_info.client_count;
        this.iscsiData[1].value = res.data.iscsi_info.lun;
        this.iscsiData[2].value = res.data.iscsi_info.client_connect;
        this.iscsiData[3].value = res.data.iscsi_info.target_count;

        // 处理块设备性能表格数据
        let arr = []
        for(const key in res.data.performance) {
          arr.push({
            name: key,
            w_ops: res.data.performance[key][0],
            r_ops: res.data.performance[key][1],
            w_byte: res.data.performance[key][2],
            r_byte: res.data.performance[key][3],
            w_delay: res.data.performance[key][4],
            r_delay: res.data.performance[key][5]
          })
        }
        this.blockData = [...arr];

        // 处理相关服务进程状态数据
        this.serviceData = res.data.service;
      }
      this.poolTableLoading = false;
      this.iscsiLoading = false;
      this.blockTableLoading = false;
      this.serviceTableLoading = false;
    },

    // 将大小转为字节
    changeToKiBSize(size) {
      let unit = ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
      let index = unit.indexOf(size.split(' ')[1]);
      let resultSize = 0;
      if(index === 0) { // KiB转为字节
        resultSize = size.split(' ')[0] * 1024;
      }else if(index === -1) { // 不变
        resultSize = size.split(' ')[0];
      }else {
        resultSize = Number(size.split(' ')[0]) * Math.pow(1024,index+1);
      }
      return resultSize;
    },
  },
}
</script>
<style scoped>
  /* .base-card-title > span {
    font-size: 14px;
    color: var(--mainColor666);
  } */
  .total-span {
    display: inline-block;
    width: 144px;
    height: 37px;
    padding: 8px;
    border-right: 1px solid #e8e8e8;
    overflow: auto;
  }
  ::v-deep.ant-table-footer {
    height: 37px;
    padding: 0;
    overflow: hidden;
    background-color: #f0f3f5;
  }

  .iscsi-box {
    width: 100%;
    height: 296px;
    overflow: auto;
    background-color: var(--mainGreyColor);
  }
  .iscsi-item-box {
    background-color: #fff;
    padding: 13px;
  }
  .iscsi-item-title {
    font-size: 14px;
    color: #666;
  }
  .item-value {
    font-size: 18px;
    color: var(--themeColor);
    font-weight: 700;
  }
  ::v-deep.total-table-box .ant-table tr:last-child td {
    position: sticky;
    bottom: 0px;
    z-index: 1;
    box-shadow: 5px 0 10px #e4e4e4;
    background-color: #f1f3f5;
  }
</style>